<template>
	<view :style="colorStyle">
		<form>
			<view class='addAddress'>
				<p class="pad30 mt-22 auth-tag">请填写本人真实有效的姓名、身份证号、手机号</p>
				<view class="pad30 mt-22">
					<view class='list borderRadius15'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>真实姓名</view>
							<input type='text' placeholder='请输入真实姓名' v-model="form.realName"
								placeholder-class='placeholder' :disabled="nameDisabled == 1"></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>身份证号</view>
							<view class="address">
								<input type='text' placeholder='请输入身份证号' placeholder-class='placeholder'
                       v-model='form.cardId' :disabled="cardIdDisabled == 1"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>手机号码</view>
							<view class="address acea-row row-between pl-4">
								<view class="addressCon acea-row">
									<text class="picker color-add" v-if="!form.phone.length" @click="onPhone">请绑定手机号码</text>
									<view v-else>
										<text class="picker text--w111-999">{{form.phone}}</text>
									</view>
								</view>
								<text class="iconfont icon-s-bianji fontcolor"></text>
							</view>
						</view>
            <view class='item acea-row'>
              <view class='name'>性别</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.gender }}</view>
            </view>
            <view class='item acea-row'>
              <view class='name'>民族</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.nation }}</view>
            </view>
            <view class='item acea-row'>
              <view class='name'>生日</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.birthDay }}</view>
            </view>
            <view class='item acea-row'>
              <view class='name'>户籍地址</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.address }}</view>
            </view>
            <view class='item acea-row'>
              <view class='name'>身份证有效期</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.validityPeriod }}</view>
            </view>
            <view class='item acea-row'>
              <view class='name'>身份证签发地</view>
              <view v-if="leaseUser.auth">{{ leaseUser.auth.issuedBy }}</view>
            </view>
					</view>
				</view>
				<p class="pad30 mt-22 auth-tag">请上传本人真实有效的身份证原件</p>
				<view class="pad30 mt-22">
					<view class="list borderRadius15">
						<view class="padding20" style="display: flex;flex-wrap: wrap;">
							<view class="padding20" style="flex: 1;font-size: 0;" @click="goCamera(1)">
								<image :src="form.infoImg || '/pages/users/static/zheng.jpg'" mode="aspectFill" style="width: 100%;height: 200upx;" />
							</view>
							<view class="padding20" style="flex: 1;font-size: 0;" @click="goCamera(2)">
								<image :src="form.emblemImg || '/pages/users/static/fan.jpg'" mode="aspectFill" style="width: 100%;height: 200upx;" />
							</view>
<!--               v-if="is_audit"-->
							<view class="padding20" style="width: 100%;font-size: 0;" @click="goCamera(3)">
								<image :src="form.handsImg || '/pages/users/static/shouchi.jpg'" style="width: 100%;max-height: 380upx;" />
							</view>
              <div class="tip">点击手持照片区域，可更换照片</div>
						</view>
					</view>
				</view>
				
				<view class="pad30 mt-22" style="background: #fff" v-for="(item,index) in form.contactsInfo" :key="index">
					<view class='list borderRadius15'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>联系人关系</view>
							<view class="address acea-row row-between">
								<view class="addressCon acea-row" @click="onRelationship(index)">
									<text class="picker color-add" v-if="!item.relationship.length">请选择联系人关系</text>
									<text v-else class="picker">{{item.relationship}}</text>
								</view>
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>联系人姓名</view>
							<view class="address">
								<input type='text' placeholder='请输入联系人姓名' placeholder-class='placeholder'
									v-model='item.name' class="detail"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'><text class="xh">*</text>联系人手机</view>
							<view class="address" style="position: relative;">
								<input type='text' placeholder='请输入联系人手机' placeholder-class='placeholder'
									v-model='item.phone' class="detail"></input>
								<!-- <button v-if="index > 0" type="warn" size="mini" style="position: absolute;right: -6upx;top: -8upx;" @click.stop="dellxr(index)">删除</button> -->
							</view>
						</view>
					</view>
          <view class="add-box pb-10">
            <button class='delBnt' @click="dellxr(index)">删除</button>
          </view>
				</view>
        <view class="add-box">
          <button class='keepBnt1 bg-color' @click="addlxr">新增联系人</button>
        </view>
				
				<view class="pad30 mt-22">
					<view class='list borderRadius15'>
						<view class='item acea-row row-between-wrapper'>
							<view class="address">
								<input type='text' placeholder='请输入常用邮箱' placeholder-class='placeholder'
									v-model='form.email' class="detail"></input>
							</view>
						</view>
					</view>
				</view>
				
				<view class="pad30 mt-22">
					<view class='list borderRadius15'>
						<view class='item acea-row row-between-wrapper'>
							<view class="address">
								<input type='text' placeholder='请输入常用手机号' placeholder-class='placeholder'
									v-model='form.mostPhone' class="detail"></input>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height:200rpx;"></view>
				<button class='keepBnt bg-color' @click="save">立即保存</button>
			</view>
		</form>
		<uni-popup ref="popup" type="bottom">
			<view class="popup" style="background:#fff;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;">
				<view class="popup-title" style="font-size:28rpx;padding:20rpx 0rpx;border-bottom:1rpx solid #eee;text-align: center;">请选择</view>
				<view class="popup-list" style="padding:0 30rpx;">
					<view v-for="item in ['父母','子女','兄弟','姐妹','亲戚','朋友','配偶','同事']" :key="index" @click="popup_select(item)" style="padding:15rpx 0rpx;font-size:24rpx;">
					{{item}} <text v-if="item==form.contactsInfo.relationship" class="iconfont icon-duihao fontcolor" style="margin-left:10rpx;"></text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getExamine,
		getUserInfo,
    userComplete
	} from '@/api/user.js';
	import colors from '@/mixins/color.js';
  import {LOGINTYPE} from "@/config/cache";
  import {saveUserInfo} from "@/api/admin";
  import {
    getAdminOrderDetail,
    getAdminRefundDetail,
    getStoreOrderDetail,
    getStoreRefundDetail
  } from "../../../api/admin";
	export default {
		mixins:[colors],
		data() {
			return {
				guanxi: -1,
        infoImgDisabled:0, // 身份证正面 是否禁用
        emblemImgDisabled:0,  // 身份证反面 是否禁用
        handleDisabled:0,// 手持身份证 是否禁用
				nameDisabled: 0,
				cardIdDisabled: 0,
				anewType3: 0,
				anewType4: 0,
				anewType5: 0,
				is_audit: false,
				form:{
					realName:'',	// 姓名
					cardId:'',		// 身份证
					phone:'',		// 手机号
          handsImg: '',	// 手持身份证
          infoImg: '',	// 身份证正面
          emblemImg: '',	// 身份证反面
					contactsInfo:[
						{
							name:'', 			// 姓名
							phone:'' ,			// 手机
							relationship:'',	// 关系 
						},
					],
          email:'',		// 常用邮箱
          mostPhone:'',	// 常用手机号
				},
        nowItem: {},
        leaseUser:{}
			}
		},
		onLoad(options) {
      if(options.order_id){
        this.statusType=options.statusType
        this.order_id=options.order_id
        this.getIndex()
      }

			this.appvcode = uni.getSystemInfoSync().appVersionCode

			uni.$on('isUpdatePhone', (data) => {
				this.form.phone = data
			})
			// uni.$on('isUpdateCard', (data) => {
			// 	this.form.card_img={...this.form.card_img, ...data}
			// })
      uni.$on('isUpdateCard', res => {
        const { type, base64 } = res
        if(type == 1) this.form.infoImg = base64
        if(type == 2) this.form.emblemImg = base64
        if(type == 3) this.form.handsImg = base64
      })
		},
		onUnload() {
      uni.$off()
    //   设置标题颜色
      setTimeout(()=>{
        uni.setNavigationBarColor({
          frontColor: 'fff',
          backgroundColor: '#1793f9',
        })
      },300)
    },
		methods: {
      getIndex: function() {
        let that = this;
        let obj = '';
        if (that.statusType == -3) {
          let funApi = '';
          if(this.storeNum){
            funApi = getAdminRefundDetail(that.order_id);
          }else{
            funApi = getStoreRefundDetail(that.order_id);
          }
          obj = funApi;
        } else {
          let funApi = '';
          if(this.storeNum){
            funApi = getAdminOrderDetail(that.order_id);
          }else{
            funApi = getStoreOrderDetail(that.order_id);
          }
          obj = funApi;
        }
        uni.showLoading({
          title: '加载中',
        })
        obj.then(res => {
          uni.hideLoading()
          that.nowItem = res.data;
          this.getUserInfo()
        })
      },
			addlxr() {
				if(this.form.contactsInfo.length > 4 ) {
					this.$util.Tips({
						title: '最大不能超过5个'
					});
				} else {
					this.form.contactsInfo.push({ name: '', phone: '', relationship: '' })
				}
			},
			dellxr(i) {
				this.form.contactsInfo.splice(i, 1)
			},
			getUserInfo() {
        let lease_user=this.nowItem.lease_user
        this.leaseUser=this.nowItem.lease_user
        let auth = {}
        if(lease_user.auth) {
          auth = JSON.parse(lease_user.auth)
          this.leaseUser.auth=auth
          if(auth.infoImg)  this.infoImgDisabled = 1
          if(auth.emblemImg)  this.emblemImgDisabled = 1
          if(auth.handsImg)  this.handleDisabled = 1
        }
        if(lease_user){
          if(lease_user.real_name)  this.nameDisabled = 1
          if(lease_user.card_id)  this.cardIdDisabled = 1

          // 填充信息
          this.form.realName = lease_user.real_name
          this.form.cardId = lease_user.card_id
          this.form.phone = lease_user.phone
          this.form.infoImg=auth?.infoImg
          this.form.emblemImg=auth?.emblemImg
          this.form.handsImg=auth?.handsImg
          if(lease_user.contacts_info){
            this.form.contactsInfo = JSON.parse(lease_user.contacts_info)
          }
          this.form.email= lease_user.email.trim()
          this.form.mostPhone= lease_user.most_phone.trim()
        }

				
				// getExamine().then(res => {
				// 	this.is_audit = false
				// 	if(res.data) {
				// 		const { status, version } = res.data
				// 		if(status == 0 ) this.is_audit  = true
				// 		if(status != 0 && version == this.appvcode) this.is_audit = true
				// 	}
				// })
			},
			onPhone:function(){
				uni.navigateTo({
					url: '/pages/users/user_phone/index?type=1&md=1',
				})
			},
			goCamera:function(card_type){
				if(this.infoImgDisabled == 1 && this.form.infoImg && card_type == 1) return;
				if(this.emblemImgDisabled == 1 && this.form.emblemImg && card_type==2) return;
				if(!this.form.realName || !this.form.cardId) return this.$util.Tips({ title: '请输入真实姓名和身份证号码' });
				if(!this.form.phone) return this.$util.Tips({ title: '请绑定手机号' });
				let param = '?type=' + card_type
				if(card_type == 1){
					param += '&real_name=' + this.form.realName
					param += '&card_id=' + this.form.cardId
				}
        // 传身份证信息，用于正反面校验
        param+='&card_img=' + JSON.stringify(this.form.card_img)
        param+='&addData=1' //标记为补充资料
				uni.navigateTo({
					url: '/pages/users/card_camera/index'+ param,
				})
			},
			onRelationship(index) {
				this.guanxi = index
				this.$refs.popup.open()
			},
			popup_select(value){
				this.form.contactsInfo[this.guanxi].relationship = value
				this.$refs.popup.close()
			},
			save(){
				// if(!this.form.realName) return this.$util.Tips({ title: '请输入真实姓名' });
				// if(!this.form.cardId) return this.$util.Tips({ title: '请输入身份证号码' });
				// if(!this.form.phone) return this.$util.Tips({ title: '请绑定手机号' });
				// if(!this.form.infoImg) return this.$util.Tips({ title: '请上传身份证人像照片' });
				// if(!this.form.emblemImg) return this.$util.Tips({ title: '请上传身份证国徽照片' });
				// if(!this.form.handsImg) return this.$util.Tips({ title: '请上传手持身份证照片' });
        // if(!this.form.email) return this.$util.Tips({ title: '请输入常用邮箱' });
        // if(!this.form.mostPhone) return this.$util.Tips({ title: '请输入常用手机号' });

        // 检测邮箱格式
        // if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.form.email)){
        //   return this.$util.Tips({ title: '请输入正确的邮箱' });
        // }
        // // 检测手机号格式
        // if(!/^1[3-9]\d{9}$/.test(this.form.mostPhone)){
        //   return this.$util.Tips({ title: '请输入正确的手机号' });
        // }
        //
				// for (let index in this.form.contactsInfo) {
				// 	const item = this.form.contactsInfo[index]
				// 	if(!item.name) return this.$util.Tips({ title: '请选择紧急联系人姓名' });
				// 	if(!item.phone) return this.$util.Tips({ title: '请填写急联系人手机号' });
        //   // 检测手机号格式
        //   if(!/^1[3-9]\d{9}$/.test(item.phone)){
        //     return this.$util.Tips({ title: `请输入【${item.name}】正确的手机号` });
        //   }
				// 	if(!item.relationship) return this.$util.Tips({ title: '请填写紧急联系人关系' });
				// }
        uni.showLoading({ title:'保存中...' })
        saveUserInfo(this.leaseUser.uid,this.form).then(res=>{
          uni.hideLoading()
					this.$util.Tips({ title: '保存成功' });
					setTimeout(() => {
						// uni.$emit('userInfoForm')
						uni.navigateBack();
					}, 1500)
				}).catch(err=>{
					return this.$util.Tips({ title: err });
				})
			}
		}
	}
</script>

<style scoped lang="scss">
  .auth-tag{
	  color:#868686;
	  font-size:24rpx;
  }
  .xh{
	  color:red;
  }
  .card{
	  flex: 1;
	  display:flex;
	  padding:30rpx;
	  box-sizing: border-box;
	  justify-content: space-between;
	  
  }
  .card .toux{
	  width:calc(((100vw - 120rpx) / 2) - 10rpx);
	  height:calc((((100vw - 240rpx) / 2) - 10rpx) / 1.58);
	  border-radius: 10rpx;
	  border:1rpx dashed  #868686;
	  display:flex;
	  justify-content: center;/*水平主轴居中*/
	  align-items: center;/*垂直交叉轴居中*/
	  text-align: center;
	  color:#868686;
  }
  .card .toux>image{
	  width:100%;
	  height:100%;
  }
  .color-add {
    color:#cdcdcd;
  }
  	.fontcolor{
  		color: var(--view-theme);
  	}
  	.addAddress .list {
  		background-color: #fff;
  	}
  
  	.addAddress .list .item {
  		padding: 30rpx;
  		border-top: 1rpx solid #eee;
  		position: relative;
  	}
  	
  	.addAddress .list .item .detail{
  		width: 368rpx;
  	}
  	
  	.addAddress .list .item .location{
  		position: absolute;
  		right: 46rpx;
  		top: 50%;
  		margin-top: -40rpx!important;
  		font-size: 24rpx;
  		text-align: center;
  	}
  	
  	.addAddress .list .item .icon-dizhi{
  		 font-size: 36rpx!important;
  	}
  
  	.addAddress .list .item .name {
  		width: 205rpx;
  		font-size: 30rpx;
  		color: #333;
  	}
  
  	.addAddress .list .item .address {
  		// width: 412rpx;
  		flex: 1;
  		// margin-left: 20rpx;
  	}
  	
  	.addAddress .list .item .address .addressCon{
  		width: 360rpx;
  	}
  	
  	.addAddress .list .item .address .addressCon .tip{
  		font-size: 21rpx;
  		margin-top: 4rpx;
  	}
  
  	.addAddress .list .item input {
  		// width: 475rpx;
  		flex: 1;
  		font-size: 30rpx;
  	}
  
  	.placeholder {
  		color: #ccc;
  	}
  
  	// .addAddress .list .item {
  	// 	width: 475rpx;
  	// }
  
  	.addAddress .list .item .picker {
  		width: 430rpx;
  		font-size: 30rpx;
  	}
  
  	.addAddress .list .item .iconfont {
  		font-size: 30rpx;
  		margin-top: 4rpx;
  	}
  
  	.addAddress .default {
  		padding: 0 30rpx;
  		height: 90rpx;
  		background-color: #fff;
  		margin-top: 23rpx;
  	}
  
  	.addAddress .default checkbox {
  		margin-right: 15rpx;
  	}
  
  	.addAddress .keepBnt {
  		width: 90vw;
  		height: 86rpx;
  		border-radius: 50rpx;
  		text-align: center;
  		line-height: 86rpx;
  		font-size: 32rpx;
  		color: #fff;
		position:fixed;
		left:5vw;
		bottom:50rpx;
		z-index:10;
  	}
    .add-box{
      display: flex;
      justify-content: center;
    }
	.addAddress .keepBnt1 {
    margin-top: 20rpx;
    padding: 0 20rpx;
		height: 60rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #fff;
	}
  .delBnt{
    padding: 0 20rpx;
    height: 60rpx;
    border-radius: 10rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #ed4014;
    //border: 1rpx solid #ed4014;
  }
  
  	.addAddress .wechatAddress {
  		width: 690rpx;
  		height: 86rpx;
  		border-radius: 50rpx;
  		text-align: center;
  		line-height: 86rpx;
  		margin: 0 auto;
  		font-size: 32rpx;
  		color: var(--view-theme);
  		border: 1px solid var(--view-theme);
  	}
  	.mt-22{
  		margin-top: 22rpx;
  	}
    .tip{
      width: 100%;
      text-align: center;
      color: #999;
    }
    .bg-color{
      background: #1793f9 !important;
    }
</style>
